<template>
  <div class="boss">
    <h3>关键数据指标</h3>
    <select v-model="value" class="choose">
      <option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        class="choose-1"
      ></option>
    </select>
    <div class="sele-ico"></div>
    <el-button class="cx" type="primary" @click="query">查询</el-button>
    <button class="dc" type="primary" @click="expor">导出</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "全部状态",
        },
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "处理中",
        },
        {
          value: "3",
          label: "异常",
        },
      ],
      value: "0",
    };
  },
  methods: {
    query() {
      this.$emit("statechange", { keyword: this.value });
    },
    expor() {
      this.$emit("expor");
    },
  },
};
</script>

<style lang="less" scoped>
.boss {
  width: 100%;
  height: 55px;
  padding: 0 38px 0 19px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  border-bottom: #eaf1f7 2px solid;
}

h3 {
  flex: 1;
  font-size: 16px;
  color: #415276;
  font-weight: 600;
}
.choose {
  width: 106px;
  height: 28px;
  border-radius: 5px;
  border: 0;
  outline: none;
  padding-left: 17px;
  font-size: 14px;
  color: #415178;
  background-color: #eff3f9;
  appearance: none;
  -webkit-appearance: none;
  font-size: 14px;
  color: #415276;
  font-weight: 600;
  .choose-1 {
    outline: none;
    border: 0;
    background-color: #fff;
  }
}

.sele-ico {
  width: 0;
  height: 0;
  border-top: #415178 5px solid;
  border-left: rgba(0, 0, 0, 0) 5px solid;
  border-right: rgba(0, 0, 0, 0) 5px solid;
  border-bottom: rgba(0, 0, 0, 0) 5px solid;
  position: absolute;
  top: 24px;
  right: 231px;
  pointer-events: none;
}
.cx {
  width: 80px;
  height: 28px;
  margin-left: 8px;
  background-color: #4f78f6;
  font-size: 14px;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
}
.dc {
  width: 80px;
  height: 28px;
  margin-left: 8px;
  background-color: #1fcbb8;
  border: 0;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.dc:hover {
  background-color: rgba(31, 203, 184, 0.6);
}
</style>
